<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>JavaScript中的异步 | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="异步—代码烧脑的原因1.同步和异步同步：等待结果 异步： 不等待结果 1234567891011121314//同步function sleep(seconds)&amp;#123;  var a = new Date();  while(new Date() - a &amp;lt; seconds * 1000)&amp;#123;      &amp;#125;  return&amp;#125;console.log(1);sl">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="JavaScript中的异步">
<meta property="og:url" content="https://storm4542.github.io/archives/f6d05227.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="异步—代码烧脑的原因1.同步和异步同步：等待结果 异步： 不等待结果 1234567891011121314//同步function sleep(seconds)&amp;#123;  var a = new Date();  while(new Date() - a &amp;lt; seconds * 1000)&amp;#123;      &amp;#125;  return&amp;#125;console.log(1);sl">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-08-25T09:08:27.179Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JavaScript中的异步">
<meta name="twitter:description" content="异步—代码烧脑的原因1.同步和异步同步：等待结果 异步： 不等待结果 1234567891011121314//同步function sleep(seconds)&amp;#123;  var a = new Date();  while(new Date() - a &amp;lt; seconds * 1000)&amp;#123;      &amp;#125;  return&amp;#125;console.log(1);sl">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-异步" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      JavaScript中的异步
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-08-24T09:16:35.000Z" itemprop="datePublished">2018-08-24</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h2 id="异步—代码烧脑的原因"><a href="#异步—代码烧脑的原因" class="headerlink" title="异步—代码烧脑的原因"></a>异步—代码烧脑的原因</h2><h3 id="1-同步和异步"><a href="#1-同步和异步" class="headerlink" title="1.同步和异步"></a>1.同步和异步</h3><p>同步：等待结果</p>
<p>异步： 不等待结果</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">//同步</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params">seconds</span>)</span>&#123;</span><br><span class="line">  <span class="keyword">var</span> a = <span class="keyword">new</span> <span class="built_in">Date</span>();</span><br><span class="line">  <span class="keyword">while</span>(<span class="keyword">new</span> <span class="built_in">Date</span>() - a &lt; seconds * <span class="number">1000</span>)&#123;</span><br><span class="line">    </span><br><span class="line">  &#125;</span><br><span class="line">  <span class="keyword">return</span></span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">sleep(<span class="number">3</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'wake up'</span>);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span>);</span><br><span class="line"><span class="comment">//运行结果 1 wake up 2</span></span><br><span class="line"><span class="comment">// 同步是需要等待的，但是 JavaScript 没有这一项功能，所以只能让他不停的工作，然后到达3秒钟</span></span><br></pre></td></tr></table></figure>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line"><span class="comment">// 异步</span></span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">sleep</span>(<span class="params">seconds,fn</span>)</span>&#123;</span><br><span class="line">  setTimeout(fn,seconds * <span class="number">1000</span>); <span class="comment">// 实际上是在设置闹钟，让浏览器 xx秒 后执行 fn</span></span><br><span class="line">  <span class="keyword">return</span>;</span><br><span class="line">&#125;</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">1</span>);</span><br><span class="line">sleep(<span class="number">3</span>,()=&gt;&#123;<span class="built_in">console</span>.log(<span class="string">'wake up '</span>)&#125;);</span><br><span class="line"><span class="built_in">console</span>.log(<span class="number">2</span>)</span><br><span class="line"><span class="comment">//运行结果 1 2 wake up</span></span><br><span class="line"><span class="comment">// 为什么 setTimeout 可以模拟异步？ 因为 setTimeout 方法是浏览器提供并负责执行的，JS告诉浏览器3S以后执行fn,然后它就可以去干下一步事情了。</span></span><br></pre></td></tr></table></figure>
<p>可以看出，使用异步，JS空闲了很多。</p>
<p>但是注意，JS空闲的时间，浏览器的计数器一直在工作。</p>
<h3 id="2-前端经常用到的异步"><a href="#2-前端经常用到的异步" class="headerlink" title="2.前端经常用到的异步"></a>2.前端经常用到的异步</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> w = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'img'</span>)[<span class="number">0</span>].width;</span><br><span class="line"><span class="built_in">console</span>.log(w) <span class="comment">// 0</span></span><br></pre></td></tr></table></figure>
<p>明明有图片，为什么宽度为0呢？</p>
<p>因为图片加载需要时间。</p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">例子</a></p>
<p>注意把 Network 的缓存禁用，可以看到效果</p>
<h4 id="解决方案"><a href="#解决方案" class="headerlink" title="解决方案"></a>解决方案</h4><p>在图片加载完成后会有一个 <code>onload</code>事件</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> img = <span class="built_in">document</span>.getElementsByTagName(<span class="string">'img'</span>)[<span class="number">0</span>];</span><br><span class="line">img.onload = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(img.width) <span class="comment">//400</span></span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>
<h2 id="3-遍历的异步"><a href="#3-遍历的异步" class="headerlink" title="3.遍历的异步"></a>3.遍历的异步</h2><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">var</span> li_List =<span class="built_in">document</span>.querySelectorAll(<span class="string">'li'</span>);</span><br><span class="line"><span class="keyword">for</span>(<span class="keyword">var</span> i = <span class="number">0</span>;i&lt;li_List.length;i++)&#123;</span><br><span class="line">  li_List[i].onclick = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(i)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;</span><br><span class="line"><span class="comment">//期望值：点击哪一个 li ， 就会出现该 li 的序号</span></span><br><span class="line"><span class="comment">//结果：打印出的结果会全部都是 n+1</span></span><br><span class="line"><span class="comment">//原因：var i= 0，变量声明提升，会导致循环里用的都是一个 i ，i 最后循环结果会变为 n+1 </span></span><br><span class="line"><span class="comment">//解决方法: let i = 0 ,let 在每次循环的时候都会制造一个分身，绑定到该 li_List[i]上</span></span><br><span class="line"><span class="comment">//哪里的异步？ li_List[i].onClick = function()&#123;&#125; JS没有功夫等你触发 onclick 事件，直接进行了下一步 i++</span></span><br></pre></td></tr></table></figure>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">例子</a></p>
<h3 id="4-AJAX中的异步"><a href="#4-AJAX中的异步" class="headerlink" title="4.AJAX中的异步"></a>4.AJAX中的异步</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> requsest = $.ajax(&#123;</span><br><span class="line">  url:<span class="string">'.'</span>,</span><br><span class="line">  <span class="keyword">async</span>:<span class="literal">false</span></span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(request.responseText);</span><br><span class="line"><span class="comment">//同步的ajax ， 在请求过程中，JS会一直等待响应，非常浪费资源</span></span><br><span class="line"></span><br><span class="line">$.ajax(&#123;</span><br><span class="line">  url:<span class="string">'.'</span>,</span><br><span class="line">  <span class="keyword">async</span>:<span class="literal">true</span>,</span><br><span class="line">  success:<span class="function"><span class="keyword">function</span>(<span class="params">res</span>)</span>&#123;</span><br><span class="line">    <span class="built_in">console</span>.log(res)</span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br><span class="line"><span class="built_in">console</span>.log(<span class="string">'OK'</span>)</span><br><span class="line"><span class="comment">//结果 ： OK  res</span></span><br><span class="line"><span class="comment">//异步的ajax </span></span><br><span class="line"><span class="comment">// 为什么使用 success 接收请求？ 因为这是异步的，使用 var xx = $.ajax(&#123;&#125;) 是得不到任何数据的，所以我们告诉浏览器，当接收到请求的时候再用 success 处理</span></span><br></pre></td></tr></table></figure>
<h3 id="5-异步拿到结果的形式"><a href="#5-异步拿到结果的形式" class="headerlink" title="5.异步拿到结果的形式"></a>5.异步拿到结果的形式</h3><p>两种方式</p>
<ol>
<li>轮训 ：不推荐 </li>
<li>回调 ：推荐</li>
</ol>
<h4 id="回调的形式"><a href="#回调的形式" class="headerlink" title="回调的形式"></a>回调的形式</h4><p>1.nodejs的 error-first 形式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line">fs.readFile(<span class="string">'./1.txt'</span>,(error,content)=&gt;&#123;</span><br><span class="line">  <span class="keyword">if</span>(error)&#123;</span><br><span class="line">    <span class="comment">//error</span></span><br><span class="line">  &#125;<span class="keyword">else</span>&#123;</span><br><span class="line">    <span class="comment">//success</span></span><br><span class="line">  &#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>2.Jquery 的 success-error 形式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$.ajax(&#123;</span><br><span class="line">  url:<span class="string">''</span>,</span><br><span class="line">  success:<span class="function"><span class="params">()</span>=&gt;</span>&#123;&#125;,</span><br><span class="line">  error:<span class="function"><span class="params">()</span>=&gt;</span>&#123;&#125;</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>3.Jquery的 done/fail/always形式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">$.ajax(&#123;</span><br><span class="line"></span><br><span class="line">url:<span class="string">'xxx'</span></span><br><span class="line"></span><br><span class="line">&#125;) . done( <span class="function"><span class="params">()</span>=&gt;</span>&#123;&#125; ) . fail( <span class="function"><span class="params">()</span>=&gt;</span>&#123;&#125; ).always( <span class="function"><span class="params">()</span>=&gt;</span>&#123;&#125; )</span><br></pre></td></tr></table></figure>
<p>4.Promise 的 then 形式</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">axios(&#123;</span><br><span class="line"></span><br><span class="line">url:<span class="string">'xxxx'</span></span><br><span class="line"></span><br><span class="line">&#125;).then( <span class="function"><span class="params">()</span>=&gt;</span>&#123; success &#125; ,()=&gt;&#123; fail &#125;).then(<span class="function"><span class="params">()</span>=&gt;</span>&#123;&#125;)</span><br></pre></td></tr></table></figure>
<h3 id="6-Promise的错误处理"><a href="#6-Promise的错误处理" class="headerlink" title="6.Promise的错误处理"></a>6.Promise的错误处理</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><span class="line">axios(&#123;</span><br><span class="line">  url:<span class="string">'.'</span>,</span><br><span class="line">  <span class="keyword">async</span>:<span class="literal">true</span></span><br><span class="line">&#125;).then(<span class="function">(<span class="params">x</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'succ1'</span>)</span><br><span class="line">  <span class="keyword">return</span> <span class="string">'aaaaa'</span></span><br><span class="line">&#125;,(y)=&gt;&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'err1'</span>)</span><br><span class="line">&#125;).then(<span class="function">(<span class="params">x</span>)=&gt;</span>&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'succ2'</span>,x) <span class="comment">// succ2 aaaa</span></span><br><span class="line">&#125;,(y)=&gt;&#123;</span><br><span class="line">  <span class="built_in">console</span>.log(<span class="string">'err2'</span>)</span><br><span class="line">  <span class="built_in">console</span>.log(y)</span><br><span class="line">&#125;)</span><br></pre></td></tr></table></figure>
<p>succ1和err1中的代码任意一个有错误，都由err2来处理 , err2的第一个参数可以接受错误值</p>
<p>succ1成功，转入succ2</p>
<p>succ1 return 的值会传入 succ2的参数</p>
<p>手动失败 <code>return Promise.reject(&#39;xxx&#39;)</code></p>
<p>catch可以放在最后搞定之前没写 失败函数的then ，但是 .catch((err)=&gt;{}) ===  .then(undefined,(err)=&gt;{})</p>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">例子</a></p>
<h3 id="7-手写一个Promise"><a href="#7-手写一个Promise" class="headerlink" title="7.手写一个Promise"></a>7.手写一个Promise</h3><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">ajax</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">resovle,reject</span>)=&gt;</span>&#123;</span><br><span class="line">    	<span class="comment">//做事情</span></span><br><span class="line">    	<span class="comment">// 成功resovle</span></span><br><span class="line">    	<span class="comment">// 失败 reject</span></span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">buy</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res,rej</span>)=&gt;</span>&#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">      res(<span class="string">'apple'</span>)</span><br><span class="line">    &#125;,<span class="number">2000</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line">buy().then(<span class="function">(<span class="params">res</span>)=&gt;</span>&#123;<span class="built_in">console</span>.log(res)&#125;,(err)=&gt;&#123;<span class="built_in">console</span>.log(err)&#125;)</span><br></pre></td></tr></table></figure>
<p><a href="javascript:;" rel="external nofollow noopener noreferrer" target="_blank">例子</a></p>
<h3 id="8-async-await"><a href="#8-async-await" class="headerlink" title="8.async/await"></a>8.async/await</h3><p>以同步的方式写异步</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="keyword">function</span> <span class="title">buy</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> <span class="keyword">new</span> <span class="built_in">Promise</span>(<span class="function">(<span class="params">res,rej</span>)=&gt;</span>&#123;</span><br><span class="line">    setTimeout(<span class="function"><span class="params">()</span>=&gt;</span>&#123;</span><br><span class="line">      res(<span class="string">'apple'</span>)</span><br><span class="line">    &#125;,<span class="number">2000</span>)</span><br><span class="line">  &#125;)</span><br><span class="line">&#125;</span><br><span class="line"><span class="keyword">var</span> res = <span class="keyword">await</span> buy();</span><br></pre></td></tr></table></figure>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="b3afd273.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          Array--方法
        
      </div>
    </a>
  
  
    <a href="6936d1ca.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">封装和继承</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/f6d05227.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
